<template>
    <aside class="l_right">
        <div class="widgets">
            <div class="widget-wrapper timeline">
                <div class="widget-body fs14">
                    <div class="tag-plugin timetmpl timeline">
                        <div class="timenode">
                            <el-card class="body widget-body" style="width: 100%;">
                                <el-avatar :size="100" :src="giteeuser.avatar_url"
                                    style="margin-left: 25%;width: 50%;height: 50%;" />
                                <div class="users__personal-name">
                                    <h2>
                                        <span title="Anlgin">{{ giteeuser.name }}</span>
                                    </h2>
                                    <p>@{{ giteeuser.login }}</p>
                                    <p class="bio">{{ giteeuser.remark }}</p>
                                </div>
                                <div class="users__personal-socials">
                                    <div class="ui grid">
                                        <div class="four wide column">
                                            <a :href="giteeuser.starred_url">
                                                <div class="social-count">{{ giteeuser.stared }}</div>
                                                <div class="social-name">Stars</div>
                                            </a>
                                        </div>
                                        <div class="four wide column">
                                            <a :href="giteeuser.repos_url">
                                                <div class="social-count">{{ giteeuser.watched }}</div>
                                                <div class="social-name">Watches</div>
                                            </a>
                                        </div>
                                        <div class="four wide column" id="followers-number">
                                            <a :href="giteeuser.followers_url">
                                                <div class="social-count">{{ giteeuser.followers }}</div>
                                                <div class="social-name">Followers</div>
                                            </a>
                                        </div>
                                        <div class="four wide column">
                                            <a :href="giteeuser.following_url">
                                                <div class="social-count">{{ giteeuser.following }}</div>
                                                <div class="social-name">Following</div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="users__personal-info">
                                    <div class="info-item">
                                        <el-icon>
                                            <Message />
                                        </el-icon>
                                        <span>{{ giteeuser.email }}</span>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                    <div class="tag-plugin timetmpl timeline">
                        <div class="timenode" v-for="(item, index) in hotlist" :key="index">
                            <div class="header">
                                {{ item.update_time }}
                            </div>
                            <el-card class="body widget-body">
                                <template #header>
                                    <div class="card-header">
                                        <div v-for="(logo, logoIndex) in hotlistlogo" :key="logoIndex">
                                            <el-avatar :size="25" v-if="item.name === logo.type" :src="logo.img" />
                                        </div>
                                        <span style="font-weight: bold; margin-left: 4px">{{
                                            item.name
                                        }}</span>
                                        <div style="margin-left: auto">{{ item.subtitle }}</div>
                                    </div>
                                </template>
                                <ul class="infinite-list" style="overflow: auto">
                                    <li v-for="data in item.data" :key="data.index"
                                        style="margin-top: 2px; min-height: 50px">
                                        <el-row :gutter="20" style="align-items: center">
                                            <el-col :span="3" class="grid-content">
                                                <el-tag size="small" key="item.label" type="primary" effect="dark"
                                                    v-show="data.index === 1">
                                                    {{ data.index }}
                                                </el-tag>
                                                <el-tag size="small" key="item.label" type="success" effect="dark"
                                                    v-show="data.index === 2">
                                                    {{ data.index }}
                                                </el-tag>
                                                <el-tag size="small" key="item.label" type="warning" effect="dark"
                                                    v-show="data.index === 3">
                                                    {{ data.index }}
                                                </el-tag>
                                                <el-tag size="small" key="item.label" type="info" effect="dark"
                                                    v-show="data.index > 3">
                                                    {{ data.index }}
                                                </el-tag>
                                            </el-col>
                                            <el-col :span="15" class="grid-content">
                                                <div style="margin-left: 4px">
                                                    <a :href="data.url" target="_blank" class="social" style="
                              grid-column: span 3;
                              filter: grayscale(0%);
                              font-size: 14px;
                            ">{{ data.title }}</a>
                                                </div>
                                            </el-col>
                                            <el-col :span="6" class="grid-content">
                                                <div style="color: gray; width: 100%; font-size: 12px">
                                                    {{ data.hot }}
                                                </div>
                                            </el-col>
                                        </el-row>
                                    </li>
                                </ul>
                                <template #footer>
                                    <div style="text-align: center">{{ hotlist.length }}条</div>
                                </template>
                            </el-card>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</template>

<script>
import { getHotList,getGiteeMe } from '@/api/third';
export default {

    data() {
        return {
            hotlist: [],
            hotlistlogo: [
                {
                    type: "微博",
                    img: "",
                },
                {
                    type: "今日头条",
                    img: "",
                },
                {
                    type: "虎扑",
                    img: "",
                },
                {
                    type: "知乎热榜",
                    img: "",
                },
                {
                    type: "知乎日报",
                    img: "",
                },
                {
                    type: "36氪",
                    img: "",
                },
                {
                    type: "哔哩哔哩",
                    img: "",
                },
                {
                    type: "百度热点",
                    img: "",
                },
                {
                    type: "抖音",
                    img: "",
                },
                {
                    type: "豆瓣小组",
                    img: "",
                },
                {
                    type: "IT之家",
                    img: "",
                },
                {
                    type: "虎嗅",
                    img: "",
                },
                {
                    type: "woShiPm",
                    img: "",
                },
            ],
            giteeuser: {},
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            getHotList().then((response) => {
                this.hotlist = response.data.data;
            }).catch((error) => {
                console.log(error);
            });
            if (localStorage.getItem("giteeuser") === null) {
                this.getGiteeUser()
                this.giteeuser = JSON.parse(localStorage.getItem("giteeuser"));
            } else {
                this.giteeuser = JSON.parse(localStorage.getItem("giteeuser"));
            }

        },
        getGiteeUser() {
          getGiteeMe().then((response) => {
                this.giteeuser = response.data;
                localStorage.setItem("giteeuser", JSON.stringify(response.data));
            }).catch((error) => {
                console.log(error);
            });
        }
    },

};
</script>

<style lang="scss">
.el-card {
    border: none !important;
    /* 使用 !important 以确保覆盖 Element UI 的默认样式 */
}

.card-header {
    display: flex;
}

.infinite-list {
    height: 200px;
    padding: 0;
    margin: 0;
    list-style: none;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 和 Edge */
    scroll-behavior: smooth;
    /* 平滑滚动效果（可选）*/
}

.infinite-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.users__personal-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.users__personal-socials {
    width: 100%;
    display: flex;
}

.ui.grid {
    display: flex;
    // /* 使用Flexbox */
    justify-content: center;
    align-items: center;
    width: 100%;
    /* 确保网格宽度填满其父容器 */

}

.four {
    text-align: center;
    padding: 4px;
    font-weight: bold;
}

.social-name {
    font-size: 10px;
}

.bio {
    color: #808080;
    /* 灰色字体 */
    font-size: 14px;
    /* 小号字体大小，你可以根据需要调整这个值 */
}

.info-item {
    color: #808080;
    /* 灰色字体 */
    font-size: 14px;
    /* 小号字体大小，你可以根据需要调整这个值 */
}



.users__personal-info {
    /* 这里可以根据需要添加样式，如文本对齐、间距等 */
    text-align: center;
    /* 确保 info 内的文本也是居中的 */
}
</style>
